<template>
    <li>
        <div class="swiper-container swiper2">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item of songListSwiper" :key="item.id" @click="singingListRoamingJump(songListItem)">
                    <img :src="item.picUrl" alt="">
                    <span>{{item.name}}</span>
                </div>
            </div>
        </div>
    </li>
<!--    <span @click="getName" ref="dis">{{name}}</span>-->
<!--    {{songListItem}}-->
</template>

<script>
    import Swiper from 'swiper'
    export default {
        name: "RecommendedSongListSwiper",
        props:['songListSwiper','songListItem'],
        data(){
            return{
                // name:111,
            }
        },

        updated() {
            new Swiper('.swiper2', {
                autoplay:true,
                direction: 'vertical',
                loop:true
            });
        },
        methods:{
            // getName(){
            //     // setInterval(function () {
            //     //
            //     // },3000)
            //     this.$refs.dis.style.color="red"
            // }
            singingListRoamingJump(songListItem){
                this.$router.push({path:'/singinglistroaming-view',query:{songListItem:JSON.stringify(songListItem)}})
            }
        }
    }
</script>

<style scoped>
    img{
        width: 80%;
        margin: 0 auto;
    }
    span{
        font-size: 12px;
        display: inline-block;
    }
</style>